import Taro, { Component } from '@tarojs/taro'
import { Button, Image, Text, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { copyText, makePhoneCall } from '@/utils/utils'
import { getAppletConfig, getAppConfig } from '@/utils/storage'
// import officialAccount from "@/assets/images/official-account.jpg"
import {getCustomPage} from "@/api/pageApi";
import {CUSTOM_HOME_PAGE} from "@/config/config";

//  联系客服组件
export default class CustomerService extends Component {
  state: any
  props: any
  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    this.state = {
      phone: '',
      wechat: '',
      content: '',
      isOpened: false,
      service: true
    }
  }

  componentWillMount() {
    const config = getAppletConfig()
    this.setState({
      bg: config['customerServiceBg'],
      logo: config['customerServiceLogo'],
      phone: config['customerServicePhone'],
      wechat: config['customerServiceWechat'],
      content: config['customerServiceContent'],
      service: config['customerService']
    })
    // getCustomPage(CUSTOM_HOME_PAGE).then(({ data }) => {
    //   const Index = data.content.findIndex(item => item.key === 'pageConfig')
    //   this.setState({
    //     service: data.content[Index]['service']
    //   })
    // })
  }

  setOpened(bool) {
    this.setState({
      isOpened: bool
    })
  }

  render() {
    const { bg, logo, content, phone, wechat, isOpened, service } = this.state
    // @ts-ignore
    return (
      <div>
        {service === '1' && <View className='customer-service' catchtouchmove>
          <img src={logo} className='service-logo' onClick={this.setOpened.bind(this, true)}/>
          {/*<Image src={logo} className='service-logo' onClick={this.setOpened.bind(this, true)}/>*/}
          <View hidden={!isOpened} className={classNames('fy-modal__b', isOpened && 'fy-modal--active')}>
            <View className='mask-class modal-mask' onClick={this.setOpened.bind(this, false)}/>
            <View className='trans-class modal-container'>
              <View className='modal-box d-f f-d-c'>
                <img src={bg} className='head-img'/>
                {/*<Image src={bg} className='head-img'/>*/}
                <View className='modal-body'>
                  <Text decode className='service-detail'>{content}</Text>
                  <View className='service-info'>
                    <View className='info-item d-f a-i-c'>
                      <View className='fy-icon-font item-icon'>&#xe64a;</View>
                      <View className='info-text'>{phone}</View>
                      <View className='info-button call' hoverClass='hover-class--btn' onClick={() => makePhoneCall(phone)}>拨打</View>
                    </View>
                    <View className='info-item d-f a-i-c'>
                      <View className='fy-icon-font item-icon'>&#xe602;</View>
                      <View className='info-text'>{wechat}</View>
                      <View className='info-button copy' hoverClass='hover-class--btn' onClick={() => copyText(wechat)}>复制</View>
                    </View>
                  </View>
                </View>
                {getAppConfig('publicQrCode') && <View className='qr-code f-g-5 f-d-c'>
                  <Image src={getAppConfig('publicQrCode')} className='qr-code-img'/>
                  <View className='qr-code-text m-t-10'>长按保存二维码关注公众号</View>
                </View>}
                {/*<Button openType='contact' className='service-btn'>立即咨询</Button>*/}
              </View>
              <View className='close-btn f-g-5' onClick={this.setOpened.bind(this, false)}>
                <View className='fy-icon-font close-icon'>&#xe7dc;</View>
              </View>
            </View>
          </View>
        </View>}
      </div>
    )
  }
}
